<script setup lang="ts">
import { RendererElement } from 'vue';

import gsap from 'gsap';

const { height, delay } = defineProps({
  height: {
    type: String,
    default: '45px',
  },
  delay: {
    type: Number,
    default: 0.15,
  },
});

// 列表显示动画 函数
const onBeforeEnter = (el: RendererElement) => {
  const element = el as HTMLElement;
  element.style.opacity = '0';
  element.style.height = '0px';
};
const onEnter = (el: RendererElement, done: () => void) => {
  const element = el as HTMLElement;
  const delayTime = Number(element.dataset.index)
    ? Number(element.dataset.index) * delay
    : Math.random() * 5 * delay;
  gsap.to(el, {
    opacity: 1,
    height,
    delay: delayTime,
    onComplete: done,
  });
};
const onLeave = (el: RendererElement, done: () => void) => {
  // console.log(el.dataset.index);
  const element = el as HTMLElement;
  const delayTime = Number(element.dataset.index)
    ? Number(element.dataset.index) * delay
    : Math.random() * 5 * delay;
  gsap.to(el, {
    opacity: 0,
    height: 0,
    delay: delayTime,
    onComplete: done,
  });
};
</script>

<template>
  <TransitionGroup
    :css="false"
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @leave="onLeave"
  >
    <slot></slot>
  </TransitionGroup>
</template>
